<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tiles-server</title>
    <style>
        html, body {
            padding: 0;
            margin: 0 auto;
            width: 100%;
            height: 100%;
            min-width: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet"
          href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <script src="https://openlayers.org/en/v6.4.3/examples/resources/mapbox-streets-v6-style.js"></script>
</head>
<body>
<div id="map"></div>
<script src="olms.js"></script>
<script>
// 图层切换
// https://github.com/walkermatt/ol-layerswitcher
var mapUrl = {
  /****
   * 高德地图
   * lang可以通过zh_cn设置中文，en设置英文，size基本无作用，scl设置标注还是底图，scl=1代表注记，
   * scl=2代表底图（矢量或者影像），style设置影像和路网，style=6为影像图，
   * vec——街道底图
   * img——影像底图
   * roadLabel---路网+标注
   */
  "aMap-img": "http://webst0{1-4}.is.autonavi.com/appmaptile?scale=1&style=6&x={x}&y={y}&z={z}",
  "aMap-vec": "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
  "aMap-roadLabel": "http://webst0{1-4}.is.autonavi.com/appmaptile?scale=1&style=8&x={x}&y={y}&z={z}",
  /***
   * 天地图 要key的
   * vec——街道底图
   * img——影像底图
   * ter——地形底图
   * cva——中文注记
   * cta/cia——道路+中文注记 ---roadLabel
   */
  "tian-img": "http://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的密钥",
  "tian-roadLabel": "http://t{0-7}.tianditu.gov.cn/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=你的密钥",
  "tian-label": "http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的密钥",
  "tian-vec": "http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的密钥",
  "tian-ter": "http://t{0-7}.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=你的密钥",
  /***
   *geoq地图
   * http://cache1.arcgisonline.cn
   * http://map.geoq.cn
   * vec：标准彩色地图
   * gray、blue、warm
   * line 中国轮廓图
   * china 中国轮廓图+标注
   * Hydro 水系
   * green 植被
   */
  "geoq-vec": "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
  "geoq-gray": "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
  "geoq-blue": "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
  "geoq-warm": "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
  "geoq-line": "http://cache1.arcgisonline.cn/arcgis/rest/services/SimpleFeature/ChinaBoundaryLine/MapServer/tile/{z}/{y}/{x}",//不稳定
  "geoq-china": "http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/administrative_division_boundaryandlabel/MapServer/tile/{z}/{y}/{x}",//不稳定
  "geoq-Hydro": "http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}",//不稳定
  "geoq-green": "http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/vegetation/MapServer/tile/{z}/{y}/{x}",//不稳定
  /***
   * Google
   * m 街道
   * s 影像
   */
  "google-vec": "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}",
  "google-img": "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"

};


    var map = new ol.Map(
      {
        layers: [ new ol.layer.Tile(
          {
            declutter: true,
            source: new ol.source.XYZ(
              {
                url: mapUrl['aMap-img'],
              }),
          }),
          new ol.layer.Tile(
            {
              declutter: true,
              source: new ol.source.XYZ(
                {
                  url: mapUrl['aMap-roadLabel'],
                }),
            })],
        target: 'map',
        view: new ol.View({
          // wgs84
          // https://www.jianshu.com/p/ac32f0596864
          center: ol.proj.fromLonLat([114.48, 38.03]),
          zoom: 13,
        })
      });

</script>
</body>
</html>
